<template>
  <div>
   <div class="container">
      <div class="content">
        <div class="t-list">
          <div class="t1">起始时间</div>
          <div class="t2">{{detailVo.startTime | timeFilter('yyyy/MM/dd HH:mm')}}</div>
        </div>
        <div class="t-list">
          <div class="t1">完成时间</div>
          <div class="t2">{{detailVo.endTime | timeFilter('yyyy/MM/dd')}}</div>
        </div>
        <div class="t-list">
          <div class="t1">起草单位</div>
          <div class="t2">{{detailVo.draftingUnitName}}</div>
        </div>
        <div class="t-list">
          <div class="t1">联系人</div>
          <div class="t2">{{detailVo.contacts}}</div>
        </div>
      </div>
      <div class="cells">
        <div class="cell" @click="goInfo">
          <div class="desc">详细信息</div>
          <i class="icon iconfont icon-all_icon_next"></i>
        </div>
      </div>
      <div class="cells">
      <ares-input v-model="text" placeholder="E-mail">email</ares-input>
      <ares-validator v-model="valid" :model="text" :rules="rules" :messages="messages"></ares-validator>
      </div>
    </div> 
<!--     <tab-bar></tab-bar> -->    

    <!-- <div class="side-container">
      <ares-scroll-nav-bar
        direction="vertical"
        :current="current"
        :labels="labels"
        :txts="txts"
        @change="changeHandler">
        <i slot-scope="props">{{props.txt}}</i>
      </ares-scroll-nav-bar>
    </div> -->
  </div>
  
</template>

<script>
import TabBar from './common/tabbar';

export default {
  name: 'ViewDetail',
  data() {
    return {
      id: this.$route.query.id,
      detailVo: {},
      text: '',
      valid: undefined,
      rules: {
        required: true,
        type: 'email',
        pattern: /ares.com$/,
        custom: (val) => {
          return val.length >= 12
        }
      },
      messages: {
        pattern: 'The E-mail suffix need to be ares.com.',
        custom: 'The E-mail need contain at least 12 characters.'
      },
      current: '快车',
      labels: [
        '快车',
        '小巴',
        '专车',
        '顺风车',
        '代驾',
        '公交',
        '自驾租车',
        '豪华车',
        '二手车',
        '出租车'
      ],
      txts: [
        '1快车',
        '2小巴',
        '3专车',
        '4顺风车',
        '5代驾',
        '6公交',
        '7自驾租车',
        '8豪华车',
        '9二手车',
        '10出租车'
      ]
    };
  },
  created() {
    this.init();
  },
  methods: {
    back() {
      this.$router.back();
    },
    changeHandler(cur) {
      this.current = cur
      console.log(cur)
    },
    init() {
      this.loading.show();
      // 不变更的数据，使用缓存接口调用
      this.$api.cache('queryPlanDetail', { id: this.id }).then((data) => {
        this.detailVo = data;
      }).catch((err) => {
        this.$createToast({
          type: 'error',
          time: 0,
          txt: err.message || '获取详情失败，请重试',
        });
      }).finally(() => {
        this.loading.hide();
      });
    },
    goInfo() {
      this.$router.push({
        name: 'ViewDetailInfo',
      });
    },
  },
  components: {
    TabBar,
  },
};
</script>
<style scoped lang='less'>

.container {
  /* 重要！！！当此页面没有tabbar的时候，需要将底边设置成0，否则动画效果有问题*/
  bottom: 0px !important; 
}
.content {
  padding: 15px;
  background: #fff;
  margin-top: 15px;
  .line(bottom);
}
.t-list {
  display: flex;
  font-size: 14px;
  margin-top: 7px;
  &>.t1 {
    color: #666;
    width: 90px;
  };
  .t2 {
    flex: 1;
  };
}
.cells {
  .line(top);
  background: #fff;
  margin-top: 15px;
  .cell {
    .line(bottom);
    padding: 15px 10px 15px 15px;
    display: flex;
    .desc {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon-all_icon_next {
      transform: translateY(6px);
      color: #c6c6c6;
    }
  }
}
.side-container {
  height: 300px;
  margin-top: 20px;
  overflow: auto;
  position: fixed;
  left: 0;
  border: 1px solid red;
}
</style>
